<template>
  <div id="ChangeAccount">
    <div class="content">
      <div class="overflow-auto">
        <div class="menu">
          <Menu></Menu>
        </div>
        <div class="body">
          <div class="annotation">
            更换负责人之后，原负责人将不再拥有最高管理权限，相关权限需要重新进行配置。
          </div>
          <div class="new">
            <span>新负责人</span>
            <div>
              <span style="display:inline-block">账号</span>
              <div class="phone">
                <span style="line-height: 37px;">中国+86<el-divider direction="vertical"></el-divider></span>
                <div class="in_phone">
                  <el-input type="text"
                            v-model="phone" />
                </div>
              </div>
              <div style="font-size:12px;color:#999999;margin-left: 30px;margin-top: 10px;"> 新负责人使用该手机号作为账号即可登录订单来了系统</div>
              <div class="code">
                <div class="input">
                  <el-input v-model="code"></el-input>
                </div>
                <div class="btn">
                  <el-button size="small">获取验证码</el-button>

                </div>
              </div>
              <div class="bottom">
                <el-button size="mini">取消</el-button>
                <el-button size="mini">更换</el-button>

              </div>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import Menu from '../../components/Menu'

export default {
  name: 'ChangeAccount',
  components: {
    Menu
  },
  data () {
    return {
      phone: '',
      code: '',
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .content {
  width: 100%;
  .overflow-auto {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto;
    position: absolute;
    .menu {
      // height: 1030px;
      width: 180px;
    }
    .body {
      width: 100%;
      padding: 30px 32px;

      .annotation {
        padding-left: 10px;
        width: 100%;
        height: 32px;
        line-height: 32px;
        background: #e6ecfa;
        border: 1px solid #3775f0;
        border-radius: 2px;
      }
      .new {
        margin-top: 50px;
        text-align: center;
        .phone {
          margin-top: 10px;
          margin-left: 10px;
          position: relative;
          display: inline-block;
          span {
            position: absolute;
            z-index: 2000;
            left: 0%;
            display: inline-block;
            font-size: 12px;
            margin-left: 10px;
            color: #2d77c3;
          }
          .in_phone {
            width: 300px;
            .el-input__inner {
              padding-left: 70px;
            }
          }
        }
        .code {
          margin-top: 20px;
          margin-left: 40px;
          .input {
            display: inline-block;

            width: 190px;
          }
          .btn {
            margin-left: 20px;
            display: inline-block;
          }
        }
        .bottom {
          margin-top: 20px;
          div {
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>